<template>
    <div class="app-container cashier-container">
        <div class="top-steps">
            <div class="steps-box">
                <el-steps :active="currentStep" finish-status="success" align-center>
                    <el-step title="MakeNewSale" />
                    <el-step title="EnterItem" />
                    <el-step title="EndSale" />
                    <el-step title="MakePayment" />
                </el-steps>
            </div>
            <div class="top-action-btn">
                <el-button class="make-new-btn" type="success" :disabled="isSaleStarted && !isPaid"
                    @click="makeNewSale">MAKE NEW SALE</el-button>
            </div>
        </div>

        <div class="cashier-body">
            <div class="left">
                <el-card class="card-box">
                    <el-form :model="form1" label-width="80px">
                        <el-form-item label="商品编码">
                            <el-select v-model="form1.itemSn" placeholder="请选择商品" :disabled="!isInProgress">
                                <el-option v-for="p in products" :key="p.itemSn" :label="p.productName"
                                    :value="p.itemSn" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="订购数量">
                            <el-input-number v-model="form1.quantity" :min="1" :max="100" :disabled="!isInProgress" />
                        </el-form-item>
                        <el-form-item>
                            <div class="flow-actions">
                                <el-button class="flow-btn" type="primary" @click="enterItem"
                                    :disabled="!isInProgress">ENTER ITEM</el-button>
                                <el-button class="flow-btn" type="warning" @click="endSale"
                                    :disabled="!isInProgress">END SALE</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-card class="card-box" style="margin-top:16px;">
                    <el-form :model="form2" label-width="80px">
                        <el-form-item label="付款金额">
                            <el-input v-model="form2.payAmount" placeholder="0" :disabled="!isEnded || isPaid" />
                        </el-form-item>
                        <el-form-item label="找零">
                            <el-input :value="changeAmount" disabled />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="danger" @click="makePayment" :disabled="!isEnded || isPaid">MAKE
                                PAYMENT</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div class="right">
                <el-card>
                    <div class="order-info-grid">
                        <div class="info-row">
                            <div class="info-cell label">会员</div>
                            <div class="info-cell value">{{ order.memberName }}</div>
                            <div class="info-cell label">订单号</div>
                            <div class="info-cell value">{{ order.orderNo }}</div>
                            <div class="info-cell label">总金额</div>
                            <div class="info-cell value">{{ totalAmountDisplay }}</div>
                        </div>
                        <div class="info-row">
                            <div class="info-cell label">总件数</div>
                            <div class="info-cell value">{{ totalQuantity }}</div>
                            <div class="info-cell label">备注</div>
                            <div class="info-cell value">{{ order.note }}</div>
                            <div class="info-cell label">状态</div>
                            <div class="info-cell value">{{ saleStatusText }}</div>
                        </div>
                    </div>

                    <el-card style="margin-top:16px;">
                        <el-table :data="saleItemList" border style="width: 100%" :row-class-name="tableRowClassName">
                            <el-table-column type="index" label="序号" width="60" />
                            <el-table-column prop="itemSn" label="商品编码" width="120" />
                            <el-table-column prop="productName" label="商品名称" />
                            <el-table-column prop="price" label="销售价格" width="120" />

                            <el-table-column prop="quantity" label="订购数量" width="220">
                                <template #default="{ row }">
                                    <el-input-number size="small" v-model="row.quantity" :min="1" :max="999"
                                        :disabled="!isInProgress" @change="handleChangeQuantity(row)" />
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" width="100">
                                <template #default="{ row }">
                                    <el-button type="text" @click="removeItem(row)"
                                        :disabled="!isInProgress">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div style="margin-top:12px;text-align:right;color:#555">总件数: {{ totalQuantity }} 件 | 总金额: {{
                            totalAmountDisplay }}
                        </div>
                    </el-card>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue'

// 静态数据
const products = [
    { itemSn: 1001, productName: '钢笔', price: 114 },
    { itemSn: 1002, productName: '日记本', price: 514 },
    { itemSn: 1004, productName: '毛巾', price: 1919 },
    { itemSn: 1005, productName: '香波', price: 810 },
]

const isSaleStarted = ref(false)
const isEnded = ref(false)
const isPaid = ref(false)

const isInProgress = computed(() => isSaleStarted.value && !isEnded.value)

const form1 = reactive({ itemSn: null as number | null, quantity: 1 })
const form2 = reactive({ payAmount: '' })

const order = reactive({ memberName: '张三', orderNo: 'so-20241028-001', note: '送货上门' })

const saleItemList = reactive<Array<{ itemSn: number; productName: string; price: number | string; quantity: number }>>([])

const totalQuantity = computed(() => saleItemList.reduce((s, r) => s + Number(r.quantity || 0), 0))
const totalAmount = computed(() => saleItemList.reduce((s, r) => s + Number(r.quantity || 0) * Number(r.price || 0), 0))

const saleStatusText = computed(() => {
    if (!isSaleStarted.value) return '未开始'
    if (isSaleStarted.value && !isEnded.value) return '进行中'
    if (isEnded.value && !isPaid.value) return '已结束，待付款'
    return '已完成'
})

const currentStep = computed(() => {
    if (!isSaleStarted.value) return 1
    if (isSaleStarted.value && !isEnded.value) return 2
    if (isEnded.value && !isPaid.value) return 3
    return 4
})

const totalAmountDisplay = computed(() => {
    const v = Number(totalAmount.value)
    if (Number.isInteger(v)) return `${v} 元`
    return `${v.toFixed(2)} 元`
})

function makeNewSale() {
    isSaleStarted.value = true
    isEnded.value = false
    isPaid.value = false
    saleItemList.splice(0, saleItemList.length)
    form1.itemSn = null
    form1.quantity = 1
    form2.payAmount = ''

    saleItemList.push({ itemSn: 1001, productName: '钢笔', price: 114, quantity: 1 })
    saleItemList.push({ itemSn: 1002, productName: '日记本', price: 514, quantity: 2 })
    saleItemList.push({ itemSn: 1004, productName: '毛巾', price: 1919, quantity: 1 })
    saleItemList.push({ itemSn: 1005, productName: '香波', price: 810, quantity: 1 })
}

function enterItem() {
    if (!isSaleStarted.value) {
        isSaleStarted.value = true
    }
    const sn = form1.itemSn ?? 1005
    const product = products.find((p) => p.itemSn === sn) || products[0]

    saleItemList.push({ itemSn: product!.itemSn, productName: product!.productName, price: product!.price, quantity: form1.quantity })
}

function endSale() {
    if (!isSaleStarted.value) return
    isEnded.value = true
}

function makePayment() {
    if (!isEnded.value) return
    isPaid.value = true
}

function removeItem(row: any) {
    const idx = saleItemList.indexOf(row)
    if (idx >= 0) saleItemList.splice(idx, 1)
}

function tableRowClassName({ row, rowIndex }: { row: any; rowIndex: number }) {

    if (rowIndex % 4 === 0) return 'row-0'
    if (rowIndex % 4 === 1) return 'row-1'
    if (rowIndex % 4 === 2) return 'row-2'
    return 'row-3'
}

function handleChangeQuantity(row: any) {

}

const changeAmount = computed(() => {
    const pay = Number(form2.payAmount) || 0
    const change = pay - Number(totalAmount.value)
    return change > 0 ? change : 0
})
</script>

<style scoped>
.cashier-container {
    padding: 16px;
}

.cashier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cashier-body {
    display: flex;
    gap: 16px;
}

.left {
    width: 320px;
    display: flex;
    flex-direction: column;
}

.right {
    flex: 1
}

.card-box {
    padding: 12px
}

/* ！关于颜色：行条纹：使用 ::v-deep 以便作用于 el-table 生成的行（tr 在子组件中，scoped 样式默认不会命中） */
::v-deep .row-0 {
    background: #fff9f0;
}

::v-deep .row-1 {
    background: #f7fbff;
}

::v-deep .row-2 {
    background: #fffaf0;
}

::v-deep .row-3 {
    background: #f2fff6;
}

.steps-wrap {
    margin-bottom: 8px
}

.top-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.steps-box {
    flex: 1
}

.top-action-btn {
    margin-left: 16px
}

.make-new-btn {
    min-width: 120px
}

.flow-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center
}

.flow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 36px
}

.order-info-grid {
    border: 1px solid #f0f0f0;
    padding: 12px;
    border-radius: 4px
}

.order-info-grid .info-row {
    display: flex;
}

.order-info-grid .info-cell {
    padding: 10px 12px;
    border-right: 1px solid #f0f0f0
}

.order-info-grid .info-cell.label {
    background: #f7f9fc;
    width: 120px;
    color: #666
}

.order-info-grid .info-cell.value {
    background: #fff;
    flex: 1
}
</style>